<template>
  <div class="right_info">
    <div class="chatObj" :class="activeName == 'third' ? 'otherBg' : ''">
      <!-- <div class="reflashBtn">
        <i @click="reflashData" class="el-icon-refresh-right"></i>
      </div> -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="客户信息" name="first">
          <knowItem v-if="activeName == 'first'" :baseData="baseData"></knowItem>
        </el-tab-pane>
        <el-tab-pane label="常用语" name="second">
          <commentWords v-if="activeName == 'second'" @selectText="send_text"></commentWords>
        </el-tab-pane>
        <el-tab-pane label="自营订单" name="third">
          <userOrder v-if="activeName == 'third'"></userOrder>
        </el-tab-pane>
         <el-tab-pane label="商户订单" name="four">
          <userOrder v-if="activeName == 'four'" :isSupplier="true"></userOrder>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import commentWords from "./commonWords.vue";
import userOrder from "./userOrder.vue";
import knowItem from "./record.vue";
import { mapState } from "vuex";
export default {
  components: {
    knowItem,
    commentWords,
    userOrder,
  },
  props: {
    baseMsg: Object,
  },
  data() {
    return {
      activeName: "first",
      sucai: 1,
      content: [],
      text: "",
      baseData: {},
      orderData: [],
    };
  },
  computed: {
    ...mapState({
      chat_userinfo: (state) => state.conversation.chat_userinfo,
    }),
  },
  watch: {
    baseMsg() {
      this.formatData();
    },
  },

  mounted() {
    this.formatData();
  },
  methods: {
    async reflashData() {
      // 刷新用户数据
      if (this.$store.state.conversation.chat_userinfo.id) {
        let id = this.$store.state.conversation.chat_userinfo.id;
        let params = {};
        params.id = id;
        let res = await this.$api.getUser.getInfo(params);
        if (res.data.code == 200) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.baseData = res.data.result.base;
        }
      }
    },
    formatData() {
      if (this.baseMsg.base) {
        this.baseData = this.baseMsg.base;
      }
      if (this.baseMsg.order) {
        this.orderData = this.baseMsg.order;
      }
    },
    sel_material(sucai) {
      //选择素材
      this.sucai = sucai;
      this.content = []; // 在这里手动置空列表,可显示加载中的请求进度
      this.mescroll.resetUpScroll(); // 刷新列表数据
    },
    send_text(value) {
      // console.log("kkk", item);
      this.text = value;
      this.$emit("selectText", this.text);
    },
    cpimgOk(file) {
      let that = this;
      var img = new Image();
      img.src = file;
      // base64地址图片加载完毕后执行
      img.onload = function () {
        // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        // 图片原始尺寸
        var originWidth = img.width;
        var originHeight = img.height;
        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
        var maxWidth = 750,
          maxHeight = 750;
        // 目标尺寸
        var targetWidth = originWidth,
          targetHeight = originHeight;
        // 图片尺寸超过最大尺寸的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更改宽度，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
        }
        //对图片进行缩放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 图片压缩
        context.drawImage(img, 0, 0, targetWidth, targetHeight);
        /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
        //压缩后的base64文件
        var newUrl = canvas.toDataURL("image/jpeg", 0.92);
        let file = that.dataURLtoFile(newUrl);

        that.sendImage({ files: [file] });
      };
    },
    handleClick() {},
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    upCallback(page, mescroll) {
      this.$api.getim
        .material_find({ page: page.num, types: this.sucai })
        .then((res) => {
          if (res.data.code == 200) {
            let arr = res.data.result.data;
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.content = [];
            // 下拉刷新
            // 把请求到的数据添加到列表
            this.content = this.content.concat(arr);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(arr.length);
            });
          } else {
            mescroll.endErr();
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.right_info {
  flex: 1;
  width: 100%;
  max-width: 350px;
  min-width: 350px;
  /deep/ .mescroll {
    height: 580px;
  }
  /deep/ .el-tabs__nav {
    display: flex;
    align-items: center;
  }
  // position: relative;
}
.chatObj #tabfirst- {
  height: 65px;
  line-height: 65px;
}

.chatObj {
  flex: 1;
  background-color: #fff;
  height: 100%;
  position: relative;
  /deep/ #tabfirst- {
    height: 65px;
    line-height: 65px;
  }
  .reflashBtn {
    position: absolute;
    right: 30px;
    top: 20px;
    z-index: 55;
    i {
      font-size: 25px;
      color: rgb(192, 204, 213);
      cursor: pointer;
    }
  }
  // width: 100%;
  .objHeader {
    width: 100%;
    height: 65px;
    background-color: rgb(242, 244, 245);
  }
  .msgContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    padding-top: 20px;
    > img {
      width: 125px;
      height: 125px;
      border: 1px solid rgb(212, 212, 212);
      box-shadow: 0 0 10px #ccc;
    }
    .msgData {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      padding: 0 25px;
      margin-top: 15px;
      > div {
        display: flex;
        flex-direction: column;
        > span {
          margin: 3px 0;
        }
        > span:nth-child(1) {
          color: rgb(40, 40, 40);
          font-weight: bold;
        }
        > span:nth-child(2) {
          color: rgb(153, 153, 153);
        }
      }
    }
    .baseMsgs {
      width: 100%;
      padding: 5px 10px;
      > .itemData {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 20px;
        .leftTitle {
          display: flex;
          align-items: center;
          > span:nth-child(1) {
            color: rgb(80, 141, 237);
            width: 5px;
            height: 15px;
            display: block;
            background-color: rgb(80, 141, 237);
            margin-right: 5px;
          }
          > span:nth-child(2) {
            color: rgb(21, 21, 21);
            font-weight: bold;
            font-size: 17px;
          }
        }
        .rightEdit {
          color: rgb(65, 131, 239);
          cursor: pointer;
        }
      }
      .itemBaseData {
        text-align: left;
        margin: 10px 0 5px 0;
      }
      .record {
        text-align: left;
        color: rgb(164, 164, 164);
        margin-top: 10px;
      }
      .btns {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
        button {
          padding: 8px 20px;
        }
      }
    }
  }
}

.im_material {
  width: 100%;
  height: 100%;
  background: #ffffff;
  margin: 0 4px;
  word-break: break-all;
  overflow: hidden;
  > .material_tabs {
    height: 60px;
    background: #f9fafb;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    padding-left: 15px;
    > div {
      height: 50px;
      width: 120px;
      z-index: 14;
      position: relative;
      display: inline-block;
      padding-top: 20px;
      cursor: pointer;
      margin: 0 -4px;
    }
    > div::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background: #f9fafb;
      border: 1px solid #eef0f5;
      border-bottom: none;
      border-radius: 0.5em 0.5em 0 0;
      transform: perspective(1.5em) rotateX(5deg);
      transform-origin: bottom;
    }
    .im_active::before {
      background: #fff;
    }
  }
  .material_body {
    width: 100%;
    /*height: calc(100vh - 230px);*/
    overflow-y: auto;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
    cursor: pointer;
    > .material_item1 {
      border-radius: 10px;
      border: 1px solid #cccccc;
      width: 95%;
      margin: 5px auto;
      p {
        padding: 0 10px;
        text-align: left;
        color: #000;
        line-height: 25px;
      }
    }
  }
  .material_body2 {
    width: 95%;
    overflow-y: auto;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
    > .material_item3 {
      width: 40%;
      margin: 5px 0;
      img {
        width: 100%;
      }
    }
  }
}

.knowItem {
  text-align: left;
  border-bottom: 1px solid rgb(230, 230, 230);
  padding: 10px 0;
  .titles {
    height: 50px;
  }
  .timeData {
    display: flex;
    justify-content: space-between;
  }
}

.orderContainer {
  text-align: left;
  background-color: rgb(249, 250, 251);
  .orderItem {
    background-color: #fff;
    padding: 5px 10px;
    .oid {
      width: 100%;
      border-bottom: 1px solid rgb(242, 242, 242);
      padding-bottom: 5px;
    }
    .omsg {
      padding-top: 5px;
      display: flex;
      width: 100%;
      .leftImg {
        max-width: 60px;
        min-width: 60px;
        height: 60px;
        border-radius: 5px;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .rightData {
        padding-left: 10px;
        .otherMsg {
          display: flex;
          width: 100%;
          justify-content: space-between;
          .price {
            color: rgb(255, 90, 0);
          }
          .btns {
            color: #fff;
            background-color: rgb(64, 158, 255);
            padding: 0 10px;
            border-radius: 15px;
          }
        }
      }
    }
  }
}

.otherBg {
  background-color: rgb(243, 243, 243) !important;
}
</style>
